<!--
 * @Description: 
 * @Author: Leequik
 * @Date: 2025-06-13 13:55:17
 * @LastEditTime: 2025-06-13 19:16:00
 * @LastEditors: Leequik
-->
<template>
    <div class="news">
    
        <ul>
            <li v-for="(item) in newsList" :key="item.id">
                <RouterLink :to="{
                    path: '/detail', 
                    query: { 
                        id: item.id,
                        title: item.title,
                        content:item.content 
                        } 
                }">{{item.title}}</RouterLink>
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="item in newsList" :key="item.id">
                <button @click="shownews(item)">查看</button>
                <RouterLink :to="{
                    name: 'detail2', 
                    //第一种 params写法
                    /* 
                    params: { 
                        id: item.id,
                        title: item.title,
                        content:item.content 
                        } 
                    */
                    //第二种 对象写法
                    query: { 
                        id: item.id,
                        title: item.title,
                        content:item.content 
                        }          
                        
                }">{{item.title}}</RouterLink>
            </li>
        </ul>
    
    </div>
    <div class="cont"> 
        <RouterView></RouterView>
    </div>
</template>


<script lang="ts" setup>
import { reactive } from 'vue'
import {useRouter} from 'vue-router'

const newsList = reactive([
    {id:'syasdsa1',title: '标题1',content:"新闻内容1"},
    {id:'syasdsa2',title: '标题2',content:"新闻内容2"},
    {id:'syasdsa3',title: '标题3',content:"新闻内容3"},
    {id:'syasdsa4',title: '标题4',content:"新闻内容4"}

])

const router = useRouter()
interface NewsInter{
    id:string,
    title:string,
    content:string
}
function shownews(news:NewsInter) {
    router.push({
        name:'detail2',
        query: { 
            id: news.id,
            title: news.title,
            content:news.content 
            }
    })
}



</script>

<style scoped>
    ul{
        list-style: none;
    }
    li{
        padding: 5px;
    }
    a{ 
        text-decoration: none;
        color: black;
    }
    a:hover{ 
        color: red;
    }
    .news{ 
        width: 150px;
        /*border: 1px solid orange;*/
        margin: 23px auto;
        border-radius: 5px;
        position: absolute;
    }
    .cont{ 
        width: 700px;
        height: 250px;
        border: 1px solid #bbb;
        border-radius: 5px;
        margin-top: 25px;
        margin-left: 250px;
        
      
    }
</style>